<template>
  <div>
    <!-- 导航栏 -->
    <div class="body">
      <van-nav-bar
        title="标题"
        right-text="保存"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
      <!-- 主体 -->
      <ul>
        <li class="main">
          <input type="text" placeholder="姓名" />
          <!-- <input type="text" value="姓名" οnfοcus="this.style.color='#000'; 
          this.value='';" style="color:#dcdddf;font-size:14px;"/> -->
        </li>
        <li class="main">
          <input type="text" placeholder="手机号码" />
           <!-- <input type="text" value="手机号码" οnfοcus="this.style.color='#000'; 
          this.value='';" style="color:#dcdddf;font-size:14px;"/> -->
        </li>
        <li class="main">
          <i class="iconfont icon-dingwei"></i>
            <!-- <input type="text" value="点击选择地址" οnfοcus="this.style.color='#000'; 
          this.value='';" style="color:#dcdddf;font-size:14px;"/> -->
          <input type="text" placeholder="点击选择地址" />
        </li>
        <li class="main">
           <!-- <input type="text" value="详细地址：例如17号楼601等" οnfοcus="this.style.color='#000'; 
          this.value='';" style="color:#dcdddf;font-size:14px;"/> -->
          <input type="text" placeholder="详细地址：例如17号楼601等" />
        </li>
        <li class="main">
           <!-- <input type="text" value="身份证号(选填)" οnfοcus="this.style.color='#000'; 
          this.value='';" style="color:#dcdddf;font-size:14px;"/> -->
          <input type="text" placeholder="身份证号(选填)" />  
        </li>
        <li class="maining">
          <span>购买跨境商品时需要姓名、身份证号用于清关、信息将被加密保存</span>
        </li>
        <li class="maining2">
          <van-checkbox v-model="checked" style="color: #dcdddf;">设为默认地址</van-checkbox>
        </li>
        
      </ul>
    </div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      checked: false
    };
  }
};
</script>

<style scoped lang='less'>
.body {
  background: #f4f4f4;
  height: 100vh;
}
ul {
  width: 100%;
  // 主体
  li:nth-child(3) {
    position: relative;
    background: #fff;

    i {
      position: absolute;
      top: 19px;
      left: 7px;
    }
    input {
      margin-left: 25px;
    }
  }
  .main {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #f6f6f6;
    display: flex;
    align-items: center;
    input {
      width: 100%;
      height: 53px;
      border: 0;
      margin-left: 10px;
      box-sizing: border-box;
    }
  }
  li:nth-child(5) {
    // position: relative;
    margin-top: 20px;
    background: #fff;
  }
  .maining {
    margin-top: 15px;
    margin-left: 10px;
    span {
      font-size: 12px;
      color: #dcdddf;
    }
  }
  .maining2 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
  }
}
</style>